<template>
	<div>
		<van-nav-bar
		  title="我的活动"
			left-text="返回"
			 @click-left="$router.history.go(-1)"
		/>
		<van-tabs v-model="queryForm.type" @change="handleRequery">
			<van-tab title="拼团" >
				
			</van-tab>
			<van-tab title="秒杀" >
				
			</van-tab>
		</van-tabs>
		<p-page-helper :disabled="loading" @on-end="handleOnEnd">
			<van-card
				
				v-for="item in list"
				:key="item.id"
			  :num="item.goodsCount"
			  :price="item.goodsPrice*item.goodsDiscount*item.teamDiscount/100"
			  :desc="item.description"
			  :title="item.name"
			  :thumb="item.goodsLogo"
			  :origin-price="item.goodsPrice"
				:tag="getTagStr(item)"
				:class="{'activity-disabled':getDisabled(item)}"
				@click="handleGoodsInfo(item)"
			>
				<template #tags>
					<div>
						<div>
							团队容量:
							<van-tag type="primary">
								{{item.size}}
							</van-tag>
							
							已参与人数:
							<van-tag type="danger">
								{{item.hasMember}}
							</van-tag>
							
						</div>
					</div>
					<div v-if="!getDisabled(item)">
						
						<van-count-down :time="getActivityLastTime(item)">
						  <template v-slot="timeData">
								<div class="last-time">
									剩余时间:
									<span class="block">{{ timeData.hours }}</span>
									<span class="colon">:</span>
									<span class="block">{{ timeData.minutes }}</span>
									<span class="colon">:</span>
									<span class="block">{{ timeData.seconds }}</span>
								</div>
							</template>
						</van-count-down>
					</div>
				</template>
				
			</van-card>
		</p-page-helper>
	</div>
</template>

<script>
	import {getMyTeamListForPage,teamInsert,getResult} from '@/api/activity-api.js'
	export default{
		async created(){
			await this.getMyTeamListForPage()
		},
		data(){
			return{
				list:[],
				page:{},
				queryForm:{
					type:0,
					pno:1,
					psize:10,
					isOnSale:1
				},
				loading:false
			}
		},
		computed:{
			getTagStr(){
				return function(arg){
					let d = new Date().getTime()
					let end = new Date(arg.endTime).getTime()
					if(d>=end){
						
						return '过期'
					}else{
						if(arg.status==0){
							return '火热进行中'
						}else if(arg.status==1){
							return '活动已过期'
						}else if(arg.status==2){
							return '活动已结束'
						}
						
					}
				}
			},
			
			getActivityLastTime(){
				return function(arg){
					let d = new Date().getTime()
					let end = new Date(arg.endTime).getTime()
					return end-d>0?(end-d):0
				}
			},
			getDisabled(){
				return function(arg){
					let d = new Date().getTime()
					let end = new Date(arg.endTime).getTime()
					if(end-d<0||arg.status != 0){
						return true
					}else{
						return false
					}
					
				}
			}
		},
		methods:{
			async getMyTeamListForPage(){
				let res = await getMyTeamListForPage(this.queryForm)
				if(res.data.code == 200){
					this.list = res.data.data.list
					this.page = res.data.data.page
				}
			},
			async handleGoodsInfo(res){
				
				
			},
			async handleRequery(res){
				console.log(res)
				this.queryForm.pno = 1
				await this.getMyTeamListForPage()
			},
			async handleOnEnd(){
				if(this.loading ==false){
					this.loading = true
				}
				if(this.page.pno<this.page.pCount){
					this.queryForm.pno = this.queryForm.pno+1
					let res = await getMyTeamListForPage(this.queryForm)
					if(res.data.code == 200){
						this.list = this.list.concat(res.data.data.list)
						this.page = res.data.data.page
						this.loading = false
					}
				}
			},
			async loopResult(id){
				let res = await getResult({id})
				if(res.data.code == 101){
					this.$notify({type:'warning',message:res.data.msg})
					setTimeout(() => {
						this.loopResult(id)
					},300)
				}else{
					this.$router.push("/user-order")
					this.$notify({type:'success',message:res.data.msg})
				}
			},
			async handleIn(item){
				let res = await teamInsert({id:item.id})
				if(res.data.code == 200){
					console.log(res)
					await this.loopResult(item.id)
				}
			}
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.last-time{
		display: flex;
		align-items: center;
		padding: 5px 0px;
		.colon {
			display: inline-block;
			margin: 0 4px;
			color: #ee0a24;
		}
		.block {
			display: inline-block;
			width: 22px;
			color: #fff;
			font-size: 12px;
			text-align: center;
			border-radius: 5px;
			background-color: #ee0a24;
		}
	}
	.activity-disabled{
		opacity: 0.5;
	}
	
</style>
